<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>积分明细</title>
		<!-- 引入Bootstrap的样式表 -->
		<script src="js/jquery-1.11.0.min.js"></script>

		<script src="js/jqPaginator.js"></script>
		<link rel="stylesheet" href="css/BeatPicker.min.css" />
		<script src="js/BeatPicker.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<script type="text/javascript">
			$(document).ready(function() {
				$("ul.navc li").hover(function() {
						$(this).addClass("on");
					},
					function() {
						$(this).removeClass("on");
					})
			});
			$(document).ready(function() {
				$("ul.navr li").hover(function() {
						$(this).addClass("on");
					},
					function() {
						$(this).removeClass("on");
					})
			});
		</script>
		<style>
			/*与全部消息一样开始*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			li {
				list-style: none;
			}
			
			.con {
				background-color: #fff;
				padding: 0 20px;
			}
			
			.con p {
				display: inline-block;
				padding-left: 10px;
				line-height: 50px;
				margin: 0;
			}
			
			.con-header {
				width: 100%;
				height: 100px;
				border-bottom: 1px solid #e5e5e5;
			}
			
			.navi .nav-tabs {
				padding-top: 10px;
			}
			
			.navi .nav-tabs li {
				margin-right: 2px;
			}
			
			.navi .nav-tabs li a {
				background-color: #f9f9f9;
				color: #999;
				line-height: 15px;
				margin: 0;
				border: 1px solid #c5d0dc;
				border-bottom: 0;
			}
			
			.navi .nav-tabs {
				border-bottom: 0;
			}
			
			.navi .nav-tabs li a:hover {
				color: #4c8fbd;
			}
			
			.navi .nav-tabs li a:focus {
				background-color: #fff;
				border-left: 1px solid #c5d0dc;
				border-right: 1px solid #c5d0dc;
			}
			
			.navi .nav-tabs .active {
				border-top: 2px solid #1675cc;
				margin-top: -1px;
			}
			
			.navi .nav-tabs .active a {
				background-color: #fff;
			}
			
			.tab-content {
				border: 1px solid #ccc;
			}
			
			.navi .li2 {
				display: inline-block;
				width: 1000px;
			}
			.navi .li2 input{
				width:140px;
			}
			.navi .li2 span {
				margin-left: 10px;
				margin-right: 5px;
			}
			
			.navi .li2 select {
				width: 130px;
				height: 28px;
				border: 1px solid #ddd;
			}
			
			.navi .li2 button {
				display: none;
				outline: none;
			}
			
			.navi .li2 div {
				display: inline-block;
				margin: 0 10px;
			}
			
			.navi .li2 input {
				border: 1px solid #ccc;
				line-height: 25px;
				outline: none;
				padding-left: 10px;
				margin-top: 11px;
			}
			
			.navi .tab-pane p {
				display: inline-block;
				float: left;
			}
			
			.ss {
				display: inline-block;
			}
			
			.ss button {
				line-height: 25px;
				border: none;
				width: 60px;
				font-size: 13px;
				margin-top: 11px;
				outline: none;
			}
			
			.ss i {
				padding-right: 3px;
			}
			
			.ss .cz {
				background-color: #3598dc;
				color: #fff;
			}
			
			.ss .chz {
				background-color: #e1e5ec;
				color: #666;
			}
			
			.bform,
			.cform {
				width: 100%;
			}
			
			.bform table,
			.cform table {
				width: 98%;
				margin-bottom: 100px;
				margin: 0 1%;
			}
			
			.bform table p,
			.cform table p {
				display: block;
				line-height: 30px;
			}
			
			.bform table th,
			.cform table th {
				line-height: 30px;
			}
			
			.bform table i,
			.cform table i {
				line-height: 30px;
			}
			
			.bform table th,
			.cform table th {
				border: 1px solid #ddd;
				color: #34495e;
				font-size: 13px;
				font-weight: 200;
			}
			
			.bform table th input {
				background-color: #fff;
			}
			
			.bform table th i,
			.cform table th i {
				float: right;
				color: #9aa4af;
				padding-right: 10px;
			}
			
			.bform table th:first-child {
				width: 50px;
				text-align: center;
			}
			
			.bform table th:nth-child(2) {
				width: 78%;
			}
			
			.bform table td:first-child {
				text-align: center;
			}
			
			.bform table td,
			.cform table td {
				padding-left: 10px;
				line-height: 40px;
			}
			
			.bform table tr:hover td,
			.cform table tr:hover td {
				background-color: #e1e5ec;
			}
			
			.bform table .tr3:hover td,
			.cform table .tr3:hover td {
				background-color: #fff;
			}
			
			.tr3 button {
				outline: none;
				border: none;
				height: 30px;
				width: 50px;
				line-height: 30px;
				margin: 10px 3px;
			}
			
			.yd {
				background-color: #3598dc;
				color: #fff;
			}
			
			.wd {
				background-color: #e1e5ec;
				color: #666;
			}
			
			.del {
				background-color: #e7505a;
				color: #fff;
			}
			/*与全部消息一样结束*/
			/*本页单独样式*/
			
			.navc,
			.navr {
				margin-left: 100px;
				position: relative;
			}
			
			.con .navi .xlar>p {
				margin: 0 10px 0 30px;
			}
			
			.con .navi .xlal>p {
				margin: 0 10px 0 30px;
			}
			
			.navc i,
			.navr i {
				float: right;
				padding: 3px 7px;
			}
			
			.navc>li>p,
			.navr>li>p {
				margin-top: 11px;
				font-size: 14px;
				width: 100px;
				display: block;
				background-color: #fff;
				line-height: 25px;
			}
			
			.navc>li>ul>li p,
			.navr>li>ul>li p {
				line-height: 30px;
				width: 98px;
				background-color: #fff;
				font-size: 13px;
			}
			
			.navc>li>ul>li p:hover,
			.navr>li>ul>li p:hover {
				background-color: #3598dc;
				color: #fff;
			}
			
			.navc ul,
			.navr ul {
				border: 1px solid #ccc;
			}
			
			.navc>li>p,
			.navr>li>p {
				border: 1px solid #ccc;
				display: block;
			}
			
			.navc>li>ul {
				display: none;
				position: absolute;
				left: 0;
				top: 38px;
			}
			
			.navr>li>ul {
				display: none;
				position: absolute;
				left: 178px;
				top: 38px;
			}
			
			.navc>li.on>ul,
			.navr>li.on>ul {
				display: block;
			}
			
			.kuang {
				width: 98%;
				border: 1px solid #ccc;
				margin: 20px 1%;
				padding-bottom: 20px;
			}
			
			.ul01 li {
				float: left;
				width: 150px;
				line-height: 45px;
			}
			
			.ul01 span {
				padding-left: 8px;
				color: red;
			}
			
			.inputs {
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<div class="con">
			<div class="con-header">
				<i class="fa fa-file-text-o mr10"></i>
				<p>异动明细</p>
				<ul class="ul01">
					<li> 总额<span>0.00分</span></li>
					<li> 本金<span>0.00分</span></li>
					<li> 赠送<span>0.00分</span></li>
				</ul>

			</div>
			<div class="navi">
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#tab1" data-toggle="tab">全部</a>
					</li>
					<li>
						<a href="#tab2" data-toggle="tab">转入</a>
					</li>
					<li>
						<a href="#tab3" data-toggle="tab">转出</a>
					</li>
				</ul>
				<div class="tab-content">

					<div class="tab-pane active " id="tab1">

						<div class="kuang">

							<div class="li2">
								
								<span>日期</span>
								<input type="text" data-beatpicker="true" placeholder="开始日期" data-beatpicker-position="['*','*']" />
								<input type="text" data-beatpicker="true" placeholder="结束日期" data-beatpicker-position="['*','*']" />
								<span>编号</span>
								<input type="text" />
								<span>类型</span>
								<select name="">
									<option value="">全部</option>
									<option value="">用户升级奖励</option>
									<option value="">商家积分分发</option>
									<option value="">补差价升级创投奖励</option>
									<option value="">补差价升级创投奖励(现场)</option>
									<option value="">商城消费奖励</option>
									<option value="">pos机消费奖励</option>
									<option value="">转账转入</option>
									
									<option value="">分账奖励积分</option>
									<option value="">代理公司奖励</option>
								
								</select>
								<span>流向</span>
								<select name="">
									<option value="">全部</option>
									<option value="">转入</option>
									<option value="">转出</option>
								</select>
							</div>

							<div class="ss">
								<button class="cz" style="margin-left: 50px;"><i class="fa fa-search"></i>查找</button>
								<button class="chz"><i class="fa fa-times"></i>重置</button>
							</div>

						</div>

						<div class="cform">
							<table>
								<tr>
									<th>
										<p>异动编号</p>
									</th>
									<th>
										<p>异动时间</p><i class="fa fa-sort-amount-asc"></i></th>
									<th>
										<p>资金流向</p>
									</th>
									<th>
										<p>交易类型</p>
									</th>
									<th>
										<p>收支</p>
									</th>
									<th>
										<p>积分余额</p>
									</th>
									<th>
										<p>备注</p>
									</th>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
							</table>
						</div>
					</div>

					<div class="tab-pane" id="tab2">
							<div class="kuang">

							<div class="li2">
								
								<span>日期</span>
								<input type="text" data-beatpicker="true" placeholder="开始日期" data-beatpicker-position="['*','*']" />
								<input type="text" data-beatpicker="true" placeholder="结束日期" data-beatpicker-position="['*','*']" />
								<span>编号</span>
								<input type="text" />
								<span>类型</span>
								<select name="">
									<option value="">全部</option>
									<option value="">用户升级奖励</option>
									<option value="">商家积分分发</option>
									<option value="">补差价升级创投奖励</option>
									<option value="">补差价升级创投奖励(现场)</option>
									<option value="">商城消费奖励</option>
									<option value="">pos机消费奖励</option>
									<option value="">转账转入</option>
									
									<option value="">分账奖励积分</option>
									<option value="">代理公司奖励</option>
								
								</select>
								<span>流向</span>
								<select name="">
									<option value="">全部</option>
									<option value="">转入</option>
									<option value="">转出</option>
								</select>
							</div>

							<div class="ss">
								<button class="cz" style="margin-left: 50px;"><i class="fa fa-search"></i>查找</button>
								<button class="chz"><i class="fa fa-times"></i>重置</button>
							</div>

						</div>

						<div class="cform">
							<table>
								<tr>
									<th>
										<p>异动编号</p>
									</th>
									<th>
										<p>异动时间</p><i class="fa fa-sort-amount-asc"></i></th>
									<th>
										<p>资金流向</p>
									</th>
									<th>
										<p>交易类型</p>
									</th>
									<th>
										<p>收支</p>
									</th>
									<th>
										<p>积分余额</p>
									</th>
									<th>
										<p>备注</p>
									</th>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
							</table>
						</div>

					</div>
					<div class="tab-pane" id="tab3">
						<div class="kuang">

							<div class="li2">
								
								<span>日期</span>
								<input type="text" data-beatpicker="true" placeholder="开始日期" data-beatpicker-position="['*','*']" />
								<input type="text" data-beatpicker="true" placeholder="结束日期" data-beatpicker-position="['*','*']" />
								<span>编号</span>
								<input type="text" />
								<span>类型</span>
								<select name="">
									<option value="">全部</option>
									<option value="">用户升级奖励</option>
									<option value="">商家积分分发</option>
									<option value="">补差价升级创投奖励</option>
									<option value="">补差价升级创投奖励(现场)</option>
									<option value="">商城消费奖励</option>
									<option value="">pos机消费奖励</option>
									<option value="">转账转入</option>
									
									<option value="">分账奖励积分</option>
									<option value="">代理公司奖励</option>
								
								</select>
								<span>流向</span>
								<select name="">
									<option value="">全部</option>
									<option value="">转入</option>
									<option value="">转出</option>
								</select>
							</div>

							<div class="ss">
								<button class="cz" style="margin-left: 50px;"><i class="fa fa-search"></i>查找</button>
								<button class="chz"><i class="fa fa-times"></i>重置</button>
							</div>

						</div>

						<div class="cform">
							<table>
								<tr>
									<th>
										<p>异动编号</p>
									</th>
									<th>
										<p>异动时间</p><i class="fa fa-sort-amount-asc"></i></th>
									<th>
										<p>资金流向</p>
									</th>
									<th>
										<p>交易类型</p>
									</th>
									<th>
										<p>收支</p>
									</th>
									<th>
										<p>积分余额</p>
									</th>
									<th>
										<p>备注</p>
									</th>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
								<tr>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>
									<td>vvg</td>
									<td>vgfgf</td>
									<td>fcrfr</td>

								</tr>
							</table>
						</div>

				</div>
				<div>
					<iframe src="fenye.html" width="50%" height="80px" name="iframe_a" frameborder="0" style="float: right;"></iframe>
				</div>

			</div>
		</div>
		<!-- 引入Bootstrap的js文件 -->
		<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

	</body>

</html>